<!--
// +----------------------------------------------------------------------
// | Created by PHPstorm: JRKAdmin框架 [ JRKAdmin ]
// +----------------------------------------------------------------------
// | Copyright (c) 2019~2022 [LuckyHHY] All rights reserved.
// +----------------------------------------------------------------------
// | SiteUrl: http://www.luckyhhy.cn
// +----------------------------------------------------------------------
// | Author: LuckyHhy <jackhhy520@qq.com>
// +----------------------------------------------------------------------
// | Date: 2020/3/10-15:34
// +----------------------------------------------------------------------
// | Description:
// +----------------------------------------------------------------------
*-->

{extend name='public/window' /}


{block name="content"}
<link href="__PLUGS__/layui/lay/hhymodel/inputTags/inputTags.css?v=1.0" rel="stylesheet">
<style >
    .layui-form-item .input-img-show{position: absolute;left:0;z-index: 10;max-height:200px;max-width: 300px; border:1px solid #09C7F7;background-image: url(__ADMIN__/images/touming_bg.png);}
    .images-block-container{background: #f5f5f5;padding: 10px;border:1px solid #e6e6e6;}
    .images-block-container .image-block{float: left;position: relative;margin: 10px;width: 122px;height: 122px;border: 1px solid #ddd;overflow: hidden;background: url(__ADMIN__/images/touming_bg.png);line-height: 122px;}
    .images-block-container .image-block:hover{border-color:#09C7F7;}
    .images-block-container .image-block:hover .image-block-mask{display: block;}
    .images-block-container .image-block img{max-height: 122px;max-width: 122px;vertical-align: middle;}
    .images-block-container .image-block .image-block-mask{width:122px;height: 122px;position: absolute;left:0;top:0;z-index: 100;display: none;}
    .images-block-container .image-block .image-block-mask .del_btn{position: absolute;left:0;top:0;z-index: 101;width:20px;height: 20px;line-height: 20px;cursor: pointer;background: #fff;border-right:1px solid #09C7F7;border-bottom: 1px solid #09C7F7;text-align: center;}
    .images-block-container .image-block .image-block-mask .layui-btn{width:100%;position: absolute;left:0;bottom:0;border-radius: 0;height: 30px;line-height: 30px;font-size: 12px;}
    .images-block-container .layui-upload-button{position: relative;margin: 10px;width: 124px;height: 124px;}
    .images-block-container .layui-upload-button .layui-upload-icon{height: 122px;line-height: 122px}
</style >

<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body" style="padding: 15px;">
            <div class="layui-form"  lay-filter="component-form-group">

                <div class="layui-form-item">
                    <label class="layui-form-label">所属栏目：</label>
                    <div class="layui-input-block">
                        {:widget('common/forms/singleSelect',array('category_id|2|所属栏目|title_show|id',$tree,$info['category_id']))}
                    </div>
                </div>

                {:token()}

                <input type="hidden" name="id" value="{$info.id}" >
                <div class="layui-form-item">
                    <label class="layui-form-label label-required-next">相册名称：</label>
                    <div class="layui-input-block input-custom-width" style="">
                        <input type="text" name="name" value="{$info.name}" placeholder="请输入相册名称" lay-verify="required" lay-vertype="tips" lay-reqtext="请输入相册名称" autocomplete="off" class="layui-input ">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">相册标签：</label>
                    <div class="layui-input-block">
                        <div class="tags">
                            <input type="text"  id="inTag1" placeholder="回车生成标签"  class="inputTag" autocomplete="off">
                            <input type="hidden" id="jianji" name="tags" value="{$info.tags}" >
                        </div>

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">相册描述：</label>
                    <div class="layui-input-block input-custom-width" style="">
                        <textarea name="describe" placeholder="请输入相册描述" lay-verify=""  autocomplete="off" class="layui-textarea ">{$info.describe}</textarea>
                        <p class="help-block">可留空</p>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">图片上传</label>
                    <div class="layui-input-block images-block-container">
                        <div class="image-add-blcok">
                            {notempty name="$info['images']"}
                            {foreach name="$info['images']" id='images'}
                            <div class="image-block">
                                <input type="hidden" name="images[{$key}]" value="{$images}" class="images-input">
                                <img class="img" src="{$images}">
                                <div class="image-block-mask">
                                            <span class="del_btn">
                                                <i class="layui-icon">&#x1006;</i>
                                            </span>
                                    <a class="layui-btn set-index">设为主图</a>
                                </div>
                            </div>
                            {/foreach}
                            {/notempty}
                            <button type="button" class="layui-btn layui-upload-button" id="images">
                                <i class="layui-icon layui-icon-upload-drag"></i>图片
                            </button>

                        </div>
                    </div>
                    <div class="layui-form-mid layui-word-aux">默认第一张为主图</div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">是否加密</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="radio" name="is_open" value="1" title="是" lay-filter="is_pwd" {if condition="$info['is_open'] eq '1'"} checked{/if}>
                        <input type="radio" name="is_open" value="0" title="否" checked lay-filter="is_pwd" {if condition="$info['is_open'] eq '0'"} checked{/if}>
                        <input type="text" name="password" value="{$info.password}"  placeholder="请输入6位密码为空则随" autocomplete="off"
                               class="layui-input" style="display: none;" maxlength="6">
                    </div>
                    <div class="layui-form-mid layui-word-aux">查看是否需要密码</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label label-required-next">是否显示：</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="radio" name="is_show" value="1" title="显示" lay-filter=""  {eq name="$info.is_show" value="1"}  checked {/eq}>
                        <input type="radio" name="is_show" value="0" title="不显示" lay-filter="" {eq name="$info.is_show" value="0"}  checked {/eq}>
                        <p class="help-block">不显示将不会在前端页面展示该相册</p>
                    </div>

                    <label class="layui-form-label label-required-next">是否置顶：</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="radio" name="is_top" value="1" title="是" lay-filter=""  {eq name="$info.is_top" value="1"}  checked {/eq}>
                        <input type="radio" name="is_top" value="0" title="否" lay-filter="" {eq name="$info.is_top" value="0"}  checked {/eq} >
                    </div>

                </div>


                <div class="layui-form-item">

                    <label class="layui-form-label">添加IP:</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="text"  value="{$info.ip}" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">点击量：</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="text" name="hits" autocomplete="off" class="layui-input" value="{$info.hits}">
                    </div>
                </div>


                {:widget('common/forms/submit',array('add','立即提交',2))}

            </div>
        </div>
    </div>
</div>



<script>
    layui.use(['element', 'form', 'jquery','inputTags','lucky','upload'], function () {
        let element = layui.element;
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        var inputTags=layui.inputTags;
        let lucky=layui.lucky;
        let upload = layui.upload;

        inputTags.render({
            elem:'#inTag1',
            content: eval('{:json_encode($info.tg)}'),
            aldaBtn: false,
            in_id: 'jianji',
        });

        //图集上传
        upload.render({
            elem:'#images'
            ,size: "1024*12",
            url: '{:url("common/UpAlbum")}'
            ,auto:true
            ,before: function(input){
                loading = layer.load(2, {
                    shade: [0.2,'#000'] //0.2透明度的白色背景
                });

            }
            ,done: function(res){
                let id = $('.image-block').length;
                id++;
                //执行上传请求后的回调
                layer.close(loading);

                let image_str = '<div class="image-block">' +
                    '<input type="hidden" name="images['+id+']" value="'+res.path+'" class="images-input">' +
                    '<img class="img "  src="'+res.path+'">' +
                    '<div class="image-block-mask">' +
                    '<span class="del_btn">' +
                    '<i class="layui-icon">&#x1006;</i>' +
                    '</span>' +
                    '<a class="layui-btn set-index">设为主图</a>' +
                    '</div></div>';
                $('.image-add-blcok').before(image_str);
                layer.msg(res.msg, {icon: 1, time: 1000});
            },error:function (index,upload) {
                layer.close(loading);
                layer.msg('上传失败', {icon: 2, anim: 6, time: 1000});
            }
        });

        //设为主图
        $('.images-block-container').on('click','.set-index',function(){
            let index_block = $(this).parents('.image-block').clone();
            $(this).parents('.image-block').remove();
            $('.images-block-container').prepend(index_block);
            $('.image-block').each(function(e){
                let index = e+1;
                $(this).find('.images-input').attr('name','images['+index+']')
            });
        });
        //删除图片
        $('.images-block-container').on('click','.del_btn',function(){
            let index_image = $(this).parents('.image-block').remove();
        });


        form.on('radio(is_pwd)', function(data){
            if(data.value == 1){
                $("input[name=password]").css('display','block');
            }else{
                $("input[name=password]").css('display','none');
            }
        });

        //提交
        form.on('submit(add)', function (data){
            let id = $('.image-block').length;
            if(id == 0){
                layer.close(loading);
                layer.msg('最少上传一张图片', {icon: 2, anim: 6, time: 1000});
                return false;
            }
            lucky.FormSubmit("{:url('album/addAlbum')}",data.field,"table_id",1);
            return false;
        });
    })
</script>

{/block}
